<template>
  <div class="form-page">
    <Card :bordered="false" :dis-hover="true">
      <p slot="title" style="color: #666">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px"
        ></span>
        修改模式
      </p>
      <p slot="extra" style="color: #999; font-size: 12px">
        <label style="color: #ff3b30">*</label> 为必填
      </p>
      <Form
        ref="formValidate"
        :model="bloc.modelSelfMotionId"
        :rules="ruleValidate"
        :label-width="150"
      >
        <FormItem label="模式名称：" prop="selfMotion" required>
          <Input
            type="text"
            style="width: 400px"
            v-model="bloc.modelSelfMotionId.selfMotion"
          />
        </FormItem>
        <FormItem label="模式英文名称：" prop="selfMotionEnglish" required>
          <Input
            type="text"
            style="width: 400px"
            v-model="bloc.modelSelfMotionId.selfMotionEnglish"
          />
        </FormItem>
        <FormItem label="自动程序编号：" prop="selfMotionId" required>
          <Input
            type="number"
            style="width: 400px"
            v-model="bloc.modelSelfMotionId.selfMotionId"
          />
        </FormItem>
      </Form>
      <div style="margin: 20px 0px 35px 25px">
        <Button style="width: 100px; height: 40px" @click="handleCancel()"
          >返回</Button
        >
        <Button
          style="margin-left: 30px; width: 100px; height: 40px"
          type="primary"
          @click="handleSubmit('formValidate')"
          >保存
        </Button>
      </div>
    </Card>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { AutomaticBloc } from './AutomaticBloc';
import HtmlEditor from '@/component/HtmlEditor.vue';

@Component({
  components: {HtmlEditor}
})
export default class extends Vue {
  @Prop({ type: Number })
  readonly init!: number;
  bloc = new AutomaticBloc();
  ruleValidate: any = {
    selfMotion: [
      { required: true, message: "程序名称不能为空", trigger: "blur" },
    ],
    selfMotionEnglish: [
      { required: true, message: "程序英文名不能为空", trigger: "blur" },
    ],
    // selfMotionId: [
    //   { required: true, message: "程序编号不能为空", trigger: "blur" },
    // ],
  };
  
  $refs!: {
    formValidate: HTMLFormElement;
  };

  handleSubmit(name) {
    this.$refs[name].validate((valid) => {
      if (valid) {
        this.bloc
          .modifyItem(
            this.bloc.modelSelfMotionId.id,
            this.bloc.modelSelfMotionId.selfMotion,
            this.bloc.modelSelfMotionId.selfMotionEnglish,
            this.bloc.modelSelfMotionId.selfMotionId,
            this.bloc.modelSelfMotionId.deviceModelId
          )
          .then((res) => {
            this.$Message.success('保存成功');
            this.$router.push({
              path: '/device/nav/program/' + this.$route.query.id,
              query: { sortId: this.$route.query.sortId }
            });
            if (res.message !== '') {
              this.$Message.error(res.message);
            }
          })
          .catch((err) => {
            this.$Message.error('保存失败');
          })
      }
    });
  }

  handleCancel() {
    this.$router.push({
      path: '/device/nav/program/' + this.$route.query.id,
      query: { sortId: this.$route.query.sortId }
    });
  }

  mounted() {
    this.bloc.getModel(Number(this.$route.query.programId)).then((res) => {
      let data = res.data;
      this.bloc.modelSelfMotionId.id = data.id
      this.bloc.modelSelfMotionId.selfMotion = data.selfMotion;
      this.bloc.modelSelfMotionId.selfMotionEnglish = data.selfMotionEnglish;
      this.bloc.modelSelfMotionId.selfMotionId = data.selfMotionId;
      this.bloc.modelSelfMotionId.deviceModelId = data.deviceModelId;
    });
  }
}
</script>
<style lang="less" scoped>
.top {
  height: 50px;
  width: 100%;
  border-bottom: 1px solid rgba(204, 204, 204, 1);
  font-size: 18px;
  line-height: 50px;
}

/deep/ .ivu-form-item-content {
  display: flex !important;
  justify-content: start !important;
  align-items: center !important;
}
</style>
